<template>
  <div class="bj">
    <el-card class="box-card">

      <el-row class="row-bg" justify="space-between" type="flex">
        <div class="kuan">
          <el-input v-model="role_name" placeholder="角色名称" /> &nbsp; &nbsp;
          <el-button type="primary" plain @click="btn">搜素</el-button>
          <el-button plain @click="getInfo">重置</el-button>
        </div>

        <el-button type="primary" size="small" plain @click="$refs['addjs'].showDialog = true">创建角色</el-button>

      </el-row>

      <br>
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="角色ID" width="200" />
          <el-table-column prop="role_name" label="角色名称" width="250" />
          <el-table-column prop="identify" label="角色标识" width="250" />
          <el-table-column prop="description" label="角色描述" width="300" />
          <el-table-column prop="updated_at" label="添加时间" width="250" />
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="primary" icon="el-icon-edit" circle @click="openDialog(row.id)" />
              <el-button type="danger" icon="el-icon-delete" circle @click="belete(row.id)" />
            </template>
          </el-table-column>
        </el-table>
      </template>

      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <!-- 分页组件 -->
        <el-pagination
          :current-page="query.page"
          :page-sizes="[10, 30, 40, 50]"
          :page-size="query.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </el-row>

      <addjs ref="addjs" @update-list="getInfo" />
    </el-card>
  </div>
</template>
<script>
import { yonghuqxlist, deletejs } from '@/api/user'
import Addjs from './components/addjs.vue'
export default {
  name: 'Menu',
  components: { Addjs },
  props: {},
  data() {
    return {
      tableData: [],
      value: true,
      query: {
        page: 1,
        limit: 10
      },
      total: 0,
      role_name: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getInfo()
  },
  mounted() {},
  methods: {
    // 获取角色列表
    async getInfo() {
      const res = await yonghuqxlist(this.query)
      // console.log(res)
      this.total = res.data.total
      // console.log(res.data)
      this.tableData = res.data.list
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.query.limit = val
      this.getInfo()
    },
    // // 页码切换事件
    currentChange(val) {
      this.query.page = val
      this.getInfo()
    },
    // 搜素
    async btn() {
      const res = await yonghuqxlist({
        page: this.query.page,
        limit: this.query.limit,
        role_name: this.role_name
      })
      this.tableData = res.data.list
    },
    // 删除
    async belete(id) {
      await this.$confirm('确定删除吗？')
      await deletejs(id)
      this.$message.success('删除成功')

      if (this.query.page !== 1 && this.list.length === 1) {
        this.query.page--
      }
      this.getInfo()
    },
    // 新增
    openDialog(id) {
      this.$refs['addjs'].getSingleInfo(id)
      this.$refs['addjs'].showDialog = true
    }
  }
}
</script>
<style  lang='scss' scoped>
.bj{
  border: 1px solid #eaedf1;
  background-color: #eaedf1;
  width: 100%;
  height: 100%;
}

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 98%;
    margin-top: 10px;
    margin-left: 1%;
  }
  .row-bg{
    height: 40px;
  }
  .el-input {
    display: inline-block;
    width: 200px ;
  }

</style>
